<template>
	<div id="zxLeixing">
		<div class="heightChart">
			<div class="title">话务分类</div>
			<div class="titletop">
				<div>报修</div>
				<div>咨询</div>
			</div>
			<div class="midBottom">
				<div class="divbox" id="midBottomA"></div>
				<div class="divbox" id="midBottomB"></div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts';
import { getOrderTypes } from '../../../network/home';
export default {
	name: 'zxLeixing',
	data() {
		return {
			timer: null
		};
	},
	mounted() {
		this.setEchart();
		this.timer = setInterval(() => {
			this.setEchart();
		}, 30000);
	},
	beforeDestroy() {
		if (this.timer) {
			//如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
			console.log('右上关闭');
		}
	},
	methods: {
		setEchart() {
			getOrderTypes().then((res) => {
				if (res.code == '200') {
					// console.log(res.data)
					let myChartA = echarts.init(document.getElementById('midBottomA'));
					let myChartB = echarts.init(document.getElementById('midBottomB'));

					var colorList = ['#A7B84B', 
									'#10b9c4',
									'#01ffa2', 
									'#01c6ff', 
									'#01ffe4', 
									'#ff01cc', 
									'#ffa801', 
									'#01f0ff', 
									'#c001ff', 
									'#ff0184'];
					var data = res.data.bxList;
					// [
					// 	{
					// 		value: 40,
					// 		name: '报修1'
					// 	},
					// 	{
					// 		value: 12,
					// 		name: '报修1'
					// 	},
					// 	{
					// 		value: 45,
					// 		name: '报修1'
					// 	},
					// 	{
					// 		value: 60,
					// 		name: '报修1'
					// 	},
					// 	{
					// 		value: 23,
					// 		name: '报修1'
					// 	}
					// ];
					var data2 = res.data.zxList;;
					var dataChart = [];
					var sum = 0;
					data.forEach((item) => {
						sum += Number(item.value);
					});
					data.map((item, index) => {
						if (item.value != 0) {
							dataChart.push(
								{
									value: item.value,
									lr: item.lr,
									name: item.name,
									itemStyle: {
										normal: {
											color: colorList[index]
										}
									}
								},
								{
									value: sum / 150,
									itemStyle: {
										normal: {
											color: '#FFFFFF'
										}
									},
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							);
						}
					});
					
					
					var dataChart2 = [];
					var sum2 = 0;
					data2.forEach((item) => {
						sum2 += Number(item.value);
					});
					data2.map((item, index) => {
						if (item.value != 0) {
							dataChart2.push(
								{
									value: item.value,
									lr: item.lr,
									name: item.name,
									itemStyle: {
										normal: {
											color: colorList[index]
										}
									}
								},
								{
									value: sum2 / 150,
									itemStyle: {
										normal: {
											color: '#FFFFFF'
										}
									},
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							);
						}
					});
					myChartA.setOption({
						color: colorList,
						grid: {
							bottom: 150,
							left: 0,
							right: '10%'
						},

						legend: {
							show: false,
							orient: 'vertical',
							top: 'middle',
							right: '5%',
							textStyle: {
								color: '#f2f2f2',
								fontSize: 25
							},
							icon: 'roundRect'
						},
						series: [
							// 边框设置
							{
								radius: ['35%', '38%'],
								center: ['50%', '50%'],
								type: 'pie',
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: false
									}
								},
								labelLine: {
									normal: {
										show: true
									},
									emphasis: {
										show: false
									}
								},
								animation: false,
								tooltip: {
									show: false
								},
								itemStyle: {
									normal: {
										color: 'rgba(206,213,225,0.12)'
									}
								},
								data: [1]
							},
							
							// 主要展示层的
							{
								radius: ['33%', '40%'],
								center: ['50%', '50%'],
								type: 'pie',
								itemStyle: {
									normal: {
										color: function (params) {
											return colorList[params.dataIndex];
										}
									}
								},
								label: {
									show: true,
									position: 'outside',
									formatter: function (params, ticket, callback) {
										return '{radius|}{name|' + params.name + '}\n{value|'+params.value+'}{lr|('+params.percent+'%)}';
									},
									padding: [-10, -100],
									rich: {
										radius: {
											padding: [0, 6, 5, 0],
											fontSize: 20
										},
										name: {
											color: colorList,
											align: 'left',
											fontSize: 16,
											padding: [0, 0, 5, 0]
										},
										value: {
											fontSize: 12,
											padding: [0, 10, 10, 0],
											color: '#fff',
											align: 'left'
										},
										lr: {
											color: '#fff',
											align: 'left',
											fontSize: 12,
											padding: [0, 0, 10, 0]
										}
									}
								},
								labelLine: {
									normal: {
										length: 10,
										length2: 100,
										lineStyle: {
											width: 1
										}
									}
								},
								data: dataChart
							}
						]
					});
					
					myChartB.setOption({
						color: colorList,
						grid: {
							bottom: 150,
							left: 0,
							right: '10%'
						},
					
						legend: {
							show: false,
							orient: 'vertical',
							top: 'middle',
							right: '5%',
							textStyle: {
								color: '#f2f2f2',
								fontSize: 25
							},
							icon: 'roundRect'
						},
						series: [
							// 边框设置
							{
								radius: ['35%', '38%'],
								center: ['50%', '50%'],
								type: 'pie',
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: false
									}
								},
								labelLine: {
									normal: {
										show: true
									},
									emphasis: {
										show: false
									}
								},
								animation: false,
								tooltip: {
									show: false
								},
								itemStyle: {
									normal: {
										color: 'rgba(206,213,225,0.12)'
									}
								},
								data: [1]
							},
							
							// 主要展示层的
							{
								radius: ['33%', '40%'],
								center: ['50%', '50%'],
								type: 'pie',
								itemStyle: {
									normal: {
										color: function (params) {
											return colorList[params.dataIndex];
										}
									}
								},
					
								label: {
									show: true,
									position: 'outside',
									formatter: function (params, ticket, callback) {
										return '{radius|}{name|' + params.name + '}\n{value|' + params.value +'}{lr|(' + params.percent + '%)}';
									},
									// ■
									padding: [-10, -100],
									rich: {
										radius: {
											padding: [0, 6, 5, 0],
											fontSize: 20
										},
										name: {
											color: colorList,
											align: 'left',
											fontSize: 16,
											padding: [0, 0, 5, 0]
										},
										value: {
											fontSize: 12,
											padding: [0, 10, 10, 0],
											color: '#fff',
											align: 'left'
										},
										lr: {
											color: '#fff',
											align: 'left',
											fontSize: 12,
											padding: [0, 0, 10, 0]
										}
									}
								},
								labelLine: {
									normal: {
										length: 10,
										length2: 100,
										lineStyle: {
											width: 1
										}
									}
								},
								data: dataChart2
							}
						]
					});

					// let myChart = echarts.init(document.getElementById("midBottom"));
					// myChart.setOption({
					//     legend: {
					//         x: 'center',
					//         y: 'top',
					//         selectedMode: true,
					//         textStyle: {
					//             color: "#00f5ff",
					//             fontSize: 12
					//         },
					//         data: res.data.name
					//     },
					//     calculable: true,

					//     tooltip : {
					//         trigger: 'item',
					//         formatter: "{b} : {d}%"
					//     },
					//     series: [
					//         {
					//             // name: '面积模式',
					//             type: 'pie',
					//             radius: [30, 110],
					//             center: ['50%', '50%'],
					//             roseType: 'area',
					//             labelLine: {
					//                 lineStyle: {
					//                     color: "#00f5ff"
					//                 }
					//             },
					//             label: {
					//                 color: "#00f5ff",
					//                 trigger: 'item',
					//                 formatter: "{b} : {d}%"
					//             },
					//             data:res.data.dataList
					//         }
					//     ]
					// });
				}
			});
		}
	}
};
</script>

<style scoped>
.heightChart {
	width: 610px;
	height: 410px;
	background: url('../../../assets/img/worktake/top.png');
	background-size: 610px 410px;
	position: relative;
}

.title {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 22px;
	color: #fef17a;
}
.titletop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #17C455;
	font-size: 22px;
	position: absolute;
	top: 60px;
	left: 130px;
	right: 130px;
}
.midBottom {
	width: 610px;
	height:410px;
	/* position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%); */
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.divbox {
		width: 300px;
		height: 410px;
	}
</style>
